<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>
    <!-- 引入 bootstrap 样式表 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <!-- 栅格系统 -->
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <h1>图书管理</h1>
        <button
          class="btn btn-success btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#addModal"
        >
          添加
        </button>
      </div>
      <table
        class="table table-bordered table-striped table-dark table-hover text-center"
      >
        <thead>
          <!-- 表头行 -->
          <tr>
            <th scope="col">Id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表格中的每一行 -->
          <!-- <tr>
            <th scope="row">xxx</th>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
              <button type="button" class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>

    <!-- add Modal -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addForm" class="p-3">
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- edit Modal -->
    <div class="modal fade" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">编辑图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editForm" class="p-3">
              <input type="hidden" name="id" />
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="editBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入 lib 目录下的 bootstrap 和 axios -->
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-value.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <script>
      axios.defaults.baseURL = 'http://www.itcbc.com:3006'

      // 1.----获取图书并渲染到表格
      // ～～获取图书
      function books() {
        axios({
          method: 'GET',
          url: '/api/getbooks',
          params: {
            appkey: 'YOYO666'
          }
        }).then(({ data: res }) => {
          // console.log( res )

          // ～～渲染表格
          let arr = res.data.map(item => {
            // 里面存自定义属性
          return `
                <tr>
                  <th scope="row">${item.id}</th>
                  <td>${item.bookname}</td>
                  <td>${item.author}</td>
                  <td>${item.publisher}</td>
                  <td>
                    <button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                    <button data-id="${item.id}" data-bookname="${item.bookname}" data-author="${item.author}" data-publisher="${item.publisher}" type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                  </td>
                </tr>
                 `
        })
          document.querySelector('tbody').innerHTML = arr.join('') //转字符
        }).catch((error) => {
        alert(error.response.data.message)
      })
    }
      books()

      // 2.----添加图书
      let addModal = new bootstrap.Modal(document.querySelector('#addModal'))
      
      document.querySelector('.btn-success').addEventListener('click',function () {
        addModal.show()
      })

      document.querySelector('#addBtn').addEventListener('click',function () {
        let bookname = document.querySelector('#addForm [name=bookname]').value
        let author = document.querySelector('#addForm [name=author]').value
        let publisher = document.querySelector('#addForm [name=publisher]').value
        
        axios({
          method: 'POST',
          url: '/api/addbook',
          data: {
            bookname: bookname,
            author: author,
            publisher: publisher,
            appkey: 'YOYO666'
          }
        }).then(({ data:res }) => {
          if(res.status === 0) {
            books()
            document.querySelector('#addForm').reset()
            addModal.hide()
          }
        }).catch((error) => {
        alert(error.response.data.message)
      })
      })

      // 3.----删除和修改
      let editModal = new bootstrap.Modal(document.querySelector('#editModal'))
      
      // 找父级
      document.querySelector('tbody').addEventListener('click',function(e) {
        
        if(e.target.classList.contains('btn-delete')) {
          let id = e.target.dataset.id
          axios({
            method: 'DELETE',
            url: '/api/delbook',
            params: {
              id: id,
              appkey: 'YOYO666'
            }
          }).then(({ data:res }) => {
            if(res.status === 0){
              books()
            }
          }).catch((error) => {
          alert(error.response.data.message)
        })
        }
        
        if(e.target.classList.contains('btn-update')) {

          editModal.show()
          let datas = e.target.dataset
          for(let key in datas) {
            document.querySelector(`#editForm [name=${key}]`).value = datas[key]
          }
        }
      })

      document.querySelector('#editBtn').addEventListener('click',function(){
        let id = document.querySelector('#editModal [name=id]').value
        let bookname = document.querySelector('#editModal [name=bookname]').value
        let author = document.querySelector('#editModal [name=author]').value
        let publisher = document.querySelector('#editModal [name=publisher]').value
        axios({
          method: 'PUT',
          url: '/api/updatebook',
          data: {
            id,
            bookname,
            author,
            publisher,
            appkey: 'YOYO666'
          }
        }).then(({ data:res }) => {
          if(res.status === 0){
            books()
            editModal.hide()
          }
        }).catch((error) => {
        alert(error.response.data.message)
      })
      })
    </script>
  </body>
</html>
